<!--数据可视化看板-->
<template>
    <div class='dataVisualization-div'>
        <div class="isMobile-div" v-show="mobileDiv"></div>
        <!--canvas背景-->
        <iframe :src="iframeSrc" />
        <dv-border-box-11 class="dataVisualization-con" :title="dataVisualizationTit" :titleWidth="200"
            v-loading="isLoading" element-loading-text="数据加载中..." :color="dataVColor">
            <!--顶栏-->
            <div class="head-div">
                <div class="head-left">
                    <p>DATA BOARD DEMO</p>
                    <dv-decoration-8 class="dv-left" :color="dataVColor" :reverse="true" />
                </div>
                <div class="head-tit">
                    <dv-decoration-5 class="dv-tit-top" :color="dataVColor" />
                    <!--项目切换-->
                    <el-select v-model="currentProjectValue" class="dv-tit-name" :popper-append-to-body="false"
                        @change="changeProject">
                        <el-option v-for="item in projectPtions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="head-right">
                    <div class="flex">
                        <i class="el-icon-date"></i>
                        <div>{{ date }}</div>
                        <span style="width:10px;"></span>
                        <div>{{ time }}</div>
                    </div>
                    <dv-decoration-8 class="dv-right" :color="dataVColor" />
                </div>

            </div>
            <!--内容-->
            <div class="body-div">
                <!--左边图表-->
                <div class="left-charts">
                    <dv-border-box-10 :color="dataVColor" class="left-1">
                        <LineChart ref="LineChart" :dataVColor="dataVColor" />
                    </dv-border-box-10>
                    <dv-border-box-10 :color="dataVColor" class="left-2">
                        <PieChart ref="PieChart" :dataVColor="dataVColor" />
                    </dv-border-box-10>
                    <dv-border-box-10 :color="dataVColor" class="left-3">
                        <DefectPlay ref="DefectPlay" />
                    </dv-border-box-10>
                </div>
                <!--中部球体-->
                <div class="middle-earth" :style="{ color: dataVColor[1] }">
                    <!--数字盒子-->
                    <div class="middle-1">
                        <div class="num-div" :title="currentProject.msg.distance + 'KM'">
                            <p>巡检里程</p>
                            <AddNumber class="AddNumber-com" :value="currentProject.msg.distance" :time="5"
                                :thousandSign="true" />
                            <span>KM</span>
                        </div>
                        <div class="num-div" :title="currentProject.msg.towerNum + '基'">
                            <p>杆塔数量</p>
                            <AddNumber class="AddNumber-com" :value="currentProject.msg.towerNum" :time="5"
                                :thousandSign="true" />
                            <span>基</span>
                        </div>
                        <div class="num-div" :title="currentProject.msg.defectNum + '处'">
                            <p>缺陷数量</p>
                            <AddNumber class="AddNumber-com" :value="currentProject.msg.defectNum" :time="5"
                                :thousandSign="true" />
                            <span>处</span>
                        </div>
                    </div>
                    <!--球体盒子-->
                    <dv-border-box-1 :color="dataVColor" class="middle-2">
                        <EarthSphere ref="EarthSphere" :dataVColor="dataVColor" />
                    </dv-border-box-1>
                    <!--进度盒子-->
                    <div class="middle-3">
                        <dv-border-box-7 class="progress1" :color="dataVColor">
                            <ProgressChart ref="ProgressChart1" :dataVColor="dataVColor" />
                        </dv-border-box-7>
                        <dv-border-box-7 class="progress2" :color="dataVColor">
                            <ProgressChart ref="ProgressChart2" :dataVColor="dataVColor" />
                        </dv-border-box-7>
                        <dv-border-box-7 class="progress3" :color="dataVColor">
                            <ProgressChart ref="ProgressChart3" :dataVColor="dataVColor" />
                        </dv-border-box-7>
                    </div>
                </div>
                <!--右边图表-->
                <div class="right-charts">
                    <dv-border-box-10 :color="dataVColor" class="right-1">
                        <RingChart ref="RingChart" :dataVColor="dataVColor" />
                    </dv-border-box-10>
                    <dv-border-box-10 :color="dataVColor" class="right-2">
                        <HistogramChart ref="HistogramChart" :dataVColor="dataVColor" />
                    </dv-border-box-10>
                    <dv-border-box-10 :color="dataVColor" class="right-3">
                        <AtlasEchart ref="AtlasEchart" :dataVColor="dataVColor" />
                    </dv-border-box-10>
                </div>
            </div>
        </dv-border-box-11>
    </div>
</template>
<script>
import EarthSphere from "@/components/EarthSphere.vue";
import AddNumber from "@/components/AddNumber.vue";
import LineChart from "@/components/LineChart.vue";
import PieChart from "@/components/PieChart.vue";
import RingChart from "@/components/RingChart.vue";
import HistogramChart from "@/components/HistogramChart.vue";
import ProgressChart from "@/components/ProgressChart.vue";
import AtlasEchart from "@/components/AtlasEchart.vue";
import DefectPlay from "@/components/DefectPlay.vue";
export default {
    name: '',
    components: {
        EarthSphere, AddNumber, LineChart, PieChart,
        RingChart, HistogramChart, ProgressChart, AtlasEchart,
        DefectPlay
    },
    data() {
        return {
            mobileDiv: true,//手机遮罩
            isLoading: false,//加载状态
            iframeSrc: "./polygonBackground/demo.html",//背景路径
            dataVisualizationTit: "电网数据看板",//标题
            dataVColor: ['#00a97a', '#5bffd2'],//dataV主题色
            time: "",//日期
            interval: "",//计时器
            date: "",//时间
            projectPtions: [
                {
                    value: '1',
                    label: '四川项目',
                    sphereData: [
                        {
                            position: [102, 30],
                            pointName: "成都",
                            value: 31889355
                        },
                        {
                            position: [102, 27],//经度，纬度
                            pointName: "西昌",
                            value: 13578453
                        },
                        {
                            position: [107, 31],//经度，纬度
                            pointName: "达州",
                            value: 7854541453
                        },
                    ],
                    msg: {
                        distance: 12245,//巡检距离
                        towerNum: 85345,//杆塔数量
                        defectNum: 208//缺陷数量
                    },
                    lineData: [
                        [140, 232, 101, 264, 90, 340, 250],
                        [120, 282, 111, 234, 220, 340, 310],
                        [320, 132, 201, 334, 190, 130, 220]
                    ],//折线图数据
                    pieData: [234, 124, 156, 178],//饼图数据
                    ringData: [100, 120, 104, 140, 160],//环图数据
                    histData: {
                        xAxisData: ['成都', '南充', '宜宾', '西昌', '眉山', '乐山', '攀枝花'],
                        seriesData: [635, 880, 1165, 135, 342, 342, 524]
                    },//柱状图数据
                    proData: [29, 67, 90],//进度图数据
                },
                {
                    value: '2',
                    label: '西藏项目',
                    sphereData: [
                        {
                            position: [91.11, 29.97],//经度，纬度
                            pointName: "拉萨",
                            value: 78453
                        },
                        {
                            position: [80, 32],//经度，纬度
                            pointName: "阿里",
                            value: 13578453
                        },
                        {
                            position: [88, 29],//经度，纬度
                            pointName: "日喀则",
                            value: 7854541453
                        },
                    ],
                    msg: {
                        distance: 20018,//巡检距离
                        towerNum: 87624,//杆塔数量
                        defectNum: 126189//缺陷数量
                    },
                    lineData: [
                        [14, 22, 100, 164, 200, 140, 250],
                        [120, 22, 111, 24, 220, 240, 310],
                        [10, 132, 201, 334, 190, 30, 220]
                    ],//折线图数据
                    pieData: [134, 154, 156, 198],//饼图数据
                    ringData: [120, 180, 114, 120, 110],//环图数据
                    histData: {
                        xAxisData: ['拉萨', '日喀则', '昌都', '林芝', '山南', '那曲', '阿里'],
                        seriesData: [100, 280, 467, 956, 345, 111, 61]
                    },//柱状图数据
                    proData: [69, 37, 50],//进度图数据
                },
                {
                    value: '3',
                    label: '浙江项目',
                    sphereData: [
                        {
                            position: [119, 27],//经度，纬度
                            pointName: "温州",
                            value: 78453
                        },
                        {
                            position: [120, 29],//经度，纬度
                            pointName: "宁波",
                            value: 13578453
                        },
                        {
                            position: [120, 30],//经度，纬度
                            pointName: "嘉兴",
                            value: 7854541453
                        },
                    ],
                    msg: {
                        distance: 18722,//巡检距离
                        towerNum: 122334,//杆塔数量
                        defectNum: 127895//缺陷数量
                    },
                    lineData: [
                        [104, 122, 200, 164, 20, 140, 250],
                        [220, 22, 111, 24, 120, 40, 10],
                        [130, 32, 201, 34, 190, 30, 200]
                    ],//折线图数据
                    pieData: [134, 174, 156, 108],//饼图数据
                    ringData: [190, 110, 174, 130, 110],//环图数据
                    histData: {
                        xAxisData: ['杭州', '宁波', '温州', '嘉兴', '湖州', '金华', '舟山'],
                        seriesData: [1035, 100, 565, 435, 142, 842, 124]
                    },//柱状图数据
                    proData: [89, 37, 60],//进度图数据
                },
            ],
            currentProjectValue: "",//选中项目的value
            //选中的项目
            currentProject: {
                value: '',
                label: '',
                sphereData: [],
                msg: {
                    distance: 0,//巡检距离
                    towerNum: 0,//杆塔数量
                    defectNum: 0//缺陷数量
                },
                lineData: [],//责折线图数据
                pieData: [],//饼图数据
                ringData: [],//环图数据
                histData: [],//柱状图数据
                proData: [],//进度图数据
            },
        };
    },

    mounted() {
        this.judgeDevice();
    },

    methods: {

        //判断设备
        judgeDevice() {
            let isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
            if (isMobile) {
                alert("当前项目暂未适配移动端，请在pc端打开！");
            } else {
                this.mobileDiv = false;//关闭手机端遮罩
                this.getProjectMsg();//获取项目数据
                this.nowDate();//获取时间
                this.interval = setInterval(() => {
                    this.nowDate();
                }, 1000);
            }
        },

        //获取项目数据
        getProjectMsg() {
            this.isLoading = true;
            setTimeout(() => {
                this.currentProject = this.projectPtions[0];//默认选中第一个
                this.currentProjectValue = this.projectPtions[0].value;
                this.$refs.EarthSphere.init(this.currentProject.sphereData);//初始化球体
                this.createCharts();//创建图表
                window.addEventListener('resize', this.onWindowResize, false);//监听窗口尺寸变化    
                this.isLoading = false;
            }, 1500);
        },

        //监听窗口尺寸变化
        onWindowResize() {
            this.$refs.EarthSphere.repaintSphere();//重绘球体
            this.createCharts();//重绘图表
        },


        //切换项目
        changeProject(item) {
            this.isLoading = true;
            setTimeout(() => {
                this.$refs.EarthSphere.destroyCom();//销毁球体
                this.currentProject = this.projectPtions.filter(p => {
                    return p.value == item;
                })[0];
                this.$refs.EarthSphere.init(this.currentProject.sphereData);//初始化球体
                this.createCharts();//创建图表    
                this.isLoading = false;
            }, 1500);
        },

        //创建图表
        createCharts() {
            this.$refs.LineChart.createLineChart(this.currentProject.lineData);//创建折线图
            this.$refs.PieChart.createPieChart(this.currentProject.pieData);//创建饼图
            this.$refs.RingChart.createRingChart(this.currentProject.ringData);//创建环图
            this.$refs.HistogramChart.createHistogramChart(this.currentProject.histData);//创建柱状图
            //进度图数据
            let progressChartData1 = {
                name: "飞巡进度",
                value: this.currentProject.proData[0],
                id: "fxjd"
            },
                progressChartData2 = {
                    name: "项目进度",
                    value: this.currentProject.proData[1],
                    id: "xmjd"
                },
                progressChartData3 = {
                    name: "处理进度",
                    value: this.currentProject.proData[2],
                    id: "cljd"
                };
            this.$refs.ProgressChart1.createProgressChart(progressChartData1);//创建进度图1
            this.$refs.ProgressChart2.createProgressChart(progressChartData2);//创建进度图2
            this.$refs.ProgressChart3.createProgressChart(progressChartData3);//创建进度图3
            this.$refs.AtlasEchart.createAtlasChart();//创建图谱
            this.$refs.DefectPlay.createSwiper();//创建缺陷轮播图

        },

        //当前时间
        nowDate() {
            const now = new Date();
            let y = now.getFullYear();
            let m = this.lenFormat(now.getMonth() + 1);
            let d = this.lenFormat(now.getDate());
            let h = this.lenFormat(now.getHours());
            let ms = this.lenFormat(now.getMinutes());
            let s = this.lenFormat(now.getSeconds());
            this.date = y + "-" + m + "-" + d;
            this.time = h + ":" + ms + ":" + s;
        },

        //时间处理
        lenFormat(val) {
            return val > 9 ? val : "0" + val;
        },
    },

    beforeDestroy() {
        // 清除定时
        clearInterval(this.interval);
    },
};
</script>
<style scoped lang='scss'>
::v-deep .el-loading-mask {
    z-index: 99999999;
}


.dataVisualization-div {
    user-select: none;
    height: 100vh;
    width: 100vw;
    color: #fff;
    background-color: #000;

    .isMobile-div {
        position: absolute;
        height: 100vh;
        width: 100vw;
        top: 0px;
        right: 0px;
        z-index: 9999999999;
        background-color: #000;
    }

    iframe {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 0;
        border: 0px;
        height: 100%;
        width: 100%;
    }

    .dataVisualization-con {
        height: 100vh;
        width: 100vw;
        font-weight: 900;

        .head-div {
            width: 100vw;
            height: 18%;
            display: flex;
            justify-content: center;

            .head-tit {
                margin-top: 55px;
                text-align: center;

                .dv-tit-top {
                    width: 40vw;
                    height: 5vh;
                    margin: -10px auto;
                }

                .dv-tit-name {
                    padding: 10px 10px;
                }
            }

            .head-right,
            .head-left {
                margin-top: 7vh;
                width: 25vw;

                img {
                    position: absolute;
                    top: 4vh;
                    left: 23vw;
                    height: 6vh;
                    /*css滤镜图片亮度*/
                    filter: brightness(1000%);
                }

                p {
                    font-weight: 900;
                    font-size: 20px;
                    position: absolute;
                    top: 6vh;
                    left: 13vw;
                }

                .flex {
                    font-weight: 900;
                    font-size: 20px;
                    position: absolute;
                    right: 11vw;
                    display: flex;
                    align-items: center;
                }

                .dv-right,
                .dv-left {
                    width: 100%;
                    height: 30px;
                    margin-top: 10px;
                }
            }
        }

        .body-div {
            overflow: auto;
            width: 98%;
            height: 80%;
            margin: auto;
            display: flex;

            .left-charts,
            .right-charts {
                width: 25vw;
                height: 100%;
                margin: auto;
            }

            .middle-earth {
                margin: auto;
                width: 45vw;
                height: 100%;
            }

            .left-1,
            .left-2,
            .left-3,
            .right-1,
            .right-2,
            .right-3 {
                height: 30%;
                width: 100%;
                margin: 3% auto;
            }

            .middle-1,
            .middle-2,
            .middle-3 {
                width: 100%;
                height: 70%;
                // border: 1px solid #aaa;
            }

            .middle-3 {
                display: flex;

                .progress1,
                .progress2,
                .progress3 {
                    margin: auto;
                    width: 30%;
                    height: 100%;
                    // border: 1px #aaa solid;
                }
            }

            .middle-1 {
                height: 10%;
                display: flex;
                justify-content: space-between;

                .num-div {
                    margin: auto;
                    text-align: center;
                    width: 33%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    p {
                        margin: 0px;
                    }

                    span {
                        font-weight: 900;
                    }

                    .AddNumber-com {
                        font-size: 30px;
                        font-weight: 900;
                        color: #fff;
                    }
                }
            }

            .middle-3 {
                height: 20%;
            }
        }
    }
}
</style>
<style scoped>
::v-deep .el-select-dropdown {
    border: 0px;
    background-color: #279b81;
    border-radius: 0px;
    text-align: left;
    color:#fff;
}

::v-deep .el-select-dropdown__item {
    color: #fff;
}

::v-deep .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    background-color: #ccc;
}

::v-deep .el-select-dropdown__item.selected {
    color: #78c8ff;
}

::v-deep .el-input__inner {
    background-color: #279b81;
    border: none;
    border-radius: 0px;
    color:#fff;
    text-align: center;
}

::-webkit-scrollbar {
    /*滚动条整体*/
    width: 8px;
}

::-webkit-scrollbar-track {
    /*滑轨*/
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    /*滑块*/
    background-color: #999;
    border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background-color: #fff;
}
</style>